<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <h1>The JQuery AJAX</h1>
        <button onclick="doAjax()">JQuery AJAX</button>
        <button onclick="doAjaxGet()">JQuery AJAX Get</button>
        <button onclick="doAjaxPost()">JQuery AJAX Post</button>
        <button onclick="doAjaxLoad()">JQuery AJAX Load</button>
    </div>
    <div id="result"></div>
    <script src="/js/jquery-1.8.3.min.js"></script>
    <script>
        function doAjax() {
            // 1、定义url
            let url = "/doAjaxPost"
            // 2、定义请求参数
            let params = "id=200&name=oppo&remark=nice";
            // 3、发送异步请求(底层会借助XmlHttpRequest对象)
            $.ajax({
                type:"post",// 不写默认是get请求
                url:url,
                data:params,
                success:function (result) {
                    $("#resutl").html(result);
                }
            })
        }

        function doAjaxGet() {
            // 1、定义url
            let url = "/doAjaxGet"
            // 2、定义请求参数
            let params = "";
            // 3、发送post请求
            $.get(url,params,function (result) {
                //debugger
                $("#result").html(result);
            },"text");// get函数是jquery中ajax函数的一种演变形式,text为数据类型.如果不写，默认是json格式
        }

        /*
         * var obj = {"id":100,"msg":"hello"};
         * var objStr = JSON.stringify(obj);
         * var obj2 = JSON.parse(objStr);// 将json格式的字符串转换为json格式的js对象
         */

        function doAjaxPost() {
            // 1、定义url
            let url = "/doAjaxPost"
            // 2、定义请求参数
            let params = "id=200&name=oppo&remark=nice";
            // 3、发送post请求
            $.post(url,params,function (result) {
                //debugger
                $("#result").html(result);
            });// post函数是jquery中ajax函数的一种演变形式
        }

        function doAjaxLoad() {
            let url = "/doAjaxGet";
            $("#result").load(url,function () {// 语法：load(url[,params][,callback])
                console.log("load complete");
            });
        }
    </script>
</body>
</html>